@charset "UTF-8";
body, p, ul, ol, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, form, fieldset, legend, input, select, textarea, button, th, td, menu {
  margin: 0;
  padding: 0; }

* {
  box-sizing: border-box;
  font-size: 0px;
  padding: 0px;
  margin: 0px; }

ul, dl, ol {
  list-style: none; }

img, fieldset, input[type="submit"] {
  border: 0 none; }

em {
  font-style: normal; }

strong {
  font-weight: normal; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

button, input[type="button"] {
  cursor: pointer;
  border: 0 none; }

a, button, input, img {
  -webkit-touch-callout: none; }

input, select, textarea {
  outline: none; }

a {
  text-decoration: none; }

.fl {
  float: left; }

.fr {
  float: right; }

.clear {
  clear: both; }

.clearFix::after {
  content: "";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden; }

html, body {
  /*禁止用户选择元素*/
  /*-moz-user-select:none;
 -webkit-user-select: none;
-ms-user-select: none;
 -khtml-user-select:none; */
  /*禁止元素点击出现半透明黑色背景*/
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }

html {
  height: 100%;
  width: 100%;
  font-family:   "Helvetica Neue",  Helvetica,  Arial,   "PingFang SC",   "Hiragino Sans GB",   "Heiti SC",   "Microsoft YaHei",   "WenQuanYi Micro Hei",  sans-serif;
  outline: 0;
  -webkit-text-size-adjust: none; }

body {
  height: 100%;
  width: 100%;
  margin: 0;
  position: relative; }

section {
  width: 100%;
  height: 100vh;
  overflow: hidden; }

.imgWrap1 img {
  height: 100vh;
  width: 100vw; }

.imgWrap img {
  width: 100%;
  height: 100%; }

@-webkit-keyframes rotateLight1 {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(360deg); } }

@keyframes rotateLight1 {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(360deg); } }

@-webkit-keyframes rotateLight2 {
  0% {
    transform: rotate(30deg); }
  100% {
    transform: rotate(390deg); } }

@keyframes rotateLight2 {
  0% {
    transform: rotate(30deg); }
  100% {
    transform: rotate(390deg); } }

@-webkit-keyframes rotateLight3 {
  0% {
    transform: rotate(60deg); }
  100% {
    transform: rotate(420deg); } }

@keyframes rotateLight3 {
  0% {
    transform: rotate(60deg); }
  100% {
    transform: rotate(420deg); } }

@-webkit-keyframes rotateLight4 {
  0% {
    transform: rotate(90deg); }
  100% {
    transform: rotate(450deg); } }

@keyframes rotateLight4 {
  0% {
    transform: rotate(90deg); }
  100% {
    transform: rotate(450deg); } }

@-webkit-keyframes rotateLight5 {
  0% {
    transform: rotate(120deg); }
  100% {
    transform: rotate(480deg); } }

@keyframes rotateLight5 {
  0% {
    transform: rotate(120deg); }
  100% {
    transform: rotate(480deg); } }

@-webkit-keyframes rotateLight6 {
  0% {
    transform: rotate(150deg); }
  100% {
    transform: rotate(510deg); } }

@keyframes rotateLight6 {
  0% {
    transform: rotate(150deg); }
  100% {
    transform: rotate(510deg); } }

@-webkit-keyframes big {
  0% {
    transform: scale(1); }
  50% {
    transform: scale(1.05); }
  100% {
    transform: scale(1); } }

@keyframes big {
  0% {
    transform: scale(1); }
  50% {
    transform: scale(1.05); }
  100% {
    transform: scale(1); } }

@-webkit-keyframes rotate {
  0% {
    transform: rotate(0deg); }
  50% {
    transform: rotate(7deg); }
  100% {
    transform: rotate(0deg); } }

@keyframes rotate {
  0% {
    transform: rotate(0deg); }
  50% {
    transform: rotate(7deg); }
  100% {
    transform: rotate(0deg); } }

@-webkit-keyframes timeOut {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } }

@keyframes timeOut {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } }

.down {
  -webkit-animation: rotateIn 1s;
  animation: rotateIn 1s; }

.left {
  -webkit-animation: fadeInLeft 1s;
  animation: fadeInLeft 1s; }

.right {
  -webkit-animation: fadeInRight 1s;
  animation: fadeInRight 1s; }

.first {
  width: 400vw;
  display: flex;
  justify-content: center;
  transform: translate(0vw);
  transition: all 0.7s;
  position: relative;
  z-index: 3; }

section .loading {
  height: 100vh;
  width: 100vw;
  position: relative;
  background-image: url(../images/earth.png), url(../images/star.png);
  background-size: 79.73333vw 54.66667vw, cover;
  background-repeat: no-repeat;
  background-position: bottom right, center;
  display: block; }
  section .loading .man {
    width: 88.66667vw;
    position: absolute;
    bottom: 24vw;
    right: 6.53333vw; }
  section .loading .rocket {
    width: 20.26667vw;
    position: absolute;
    bottom: 26.26667vw;
    right: 47.73333vw; }
  section .loading .tip {
    width: 33.86667vw;
    position: absolute;
    bottom: 0vw;
    right: 36.13333vw; }
  section .loading .jump {
    width: 17.86667vw;
    position: absolute;
    bottom: 3.73333vw;
    right: 2.13333vw; }
  section .loading .progressNow .text {
    color: white;
    width: 26.66667vw;
    font-size: 3.73333vw;
    position: absolute;
    font-weight: bold;
    bottom: 4vw;
    left: 0.66667vw; }
    section .loading .progressNow .text span {
      font-weight: bold;
      font-size: 5.33333vw;
      color: gold; }

section .start {
  display: block;
  overflow: hidden;
  position: relative;
  height: 100vh;
  width: 100vw; }
  section .start .kugouLogo {
    width: 35%;
    position: absolute;
    right: 16px;
    top: 2.4vw; }
  section .start .startTitle {
    width: 95%;
    margin: 0 auto;
    padding-top: 14vw;
    position: relative;
    z-index: 2; }
  section .start .mouse-box {
    width: 92%;
    position: relative;
    margin-left: 0.35rem;
    z-index: 1; }
    section .start .mouse-box .mouse {
      position: absolute;
      top: -11.33333vw;
      right: 0.25rem;
      -webkit-animation: big 1s infinite linear;
      animation: big 1s infinite linear; }
    section .start .mouse-box .dog {
      width: 32vw;
      position: absolute;
      left: 34.93333vw;
      top: 9.86667vw; }
  section .start .leftMan {
    width: 48%;
    position: absolute;
    bottom: 20vw;
    left: 0.23rem;
    z-index: 2; }
  section .start .rightMan {
    width: 48%;
    position: absolute;
    bottom: 12vw;
    right: 1.33333vw;
    z-index: 2; }
  section .start .question {
    width: 30%;
    position: absolute;
    left: 0.11rem;
    bottom: 39.73333vw;
    z-index: 2;
    animation: rotate 1s infinite linear reverse; }
  section .start div[class^="erro"] {
    width: 8vw;
    position: absolute;
    z-index: 3; }
  section .start .erro1 {
    bottom: 63.46667vw;
    right: 36vw; }
  section .start .erro2 {
    bottom: 64.26667vw;
    right: 1.46667vw; }
  section .start .erro3 {
    bottom: 49.46667vw;
    right: 40.13333vw; }
  section .start .erro4 {
    bottom: 42.66667vw;
    right: 2.13333vw; }
  section .start .startButton {
    width: 52.5%;
    position: absolute;
    margin-left: 1.89rem;
    bottom: 4.4vw;
    z-index: 2; }

section .swiper-container {
  width: 100vw;
  height: 100vh;
  position: relative;
  display: block; }
  section .swiper-container .swiper-wrapper .swiper-slide {
    width: 100vw;
    height: 100vh; }
    section .swiper-container .swiper-wrapper .swiper-slide .filmSong {
      width: 100%;
      height: 100%;
      position: relative;
      overflow: hidden; }
      section .swiper-container .swiper-wrapper .swiper-slide .filmSong .whatLove {
        width: 87.73333vw;
        top: 11.06667vw;
        position: absolute; }
      section .swiper-container .swiper-wrapper .swiper-slide .filmSong .filmPerson {
        position: absolute;
        top: 27.06667vw;
        left: 8.53333vw;
        width: 88.53333vw; }
      section .swiper-container .swiper-wrapper .swiper-slide .filmSong .hill {
        width: 100vw;
        position: absolute;
        top: 91.46667vw; }
    section .swiper-container .swiper-wrapper .swiper-slide .rock {
      width: 100%;
      height: 100%;
      position: relative;
      overflow: hidden; }
      section .swiper-container .swiper-wrapper .swiper-slide .rock .rockEarth {
        position: absolute;
        width: 86.93333vw;
        left: 7.86667vw;
        top: 0vw; }
      section .swiper-container .swiper-wrapper .swiper-slide .rock .man {
        width: 68.66667vw;
        position: absolute;
        left: 14.66667vw;
        top: 19.2vw;
        z-index: 2; }
      section .swiper-container .swiper-wrapper .swiper-slide .rock .leftMan {
        width: 57.33333vw;
        position: absolute;
        top: 41.73333vw; }
      section .swiper-container .swiper-wrapper .swiper-slide .rock .rightMan {
        width: 51.33333vw;
        position: absolute;
        top: 33.33333vw;
        right: 0vw; }
      section .swiper-container .swiper-wrapper .swiper-slide .rock .stage {
        width: 100vw;
        position: absolute;
        top: 79.33333vw; }
    section .swiper-container .swiper-wrapper .swiper-slide .bath {
      width: 100%;
      height: 100%;
      overflow: hidden;
      position: relative; }
      section .swiper-container .swiper-wrapper .swiper-slide .bath .bathEarth {
        position: absolute;
        width: 86.93333vw;
        left: 7.86667vw;
        top: 0vw; }
      section .swiper-container .swiper-wrapper .swiper-slide .bath .manOne {
        width: 62vw;
        position: absolute;
        top: 20vw;
        left: 30vw; }
      section .swiper-container .swiper-wrapper .swiper-slide .bath .manTwo {
        width: 100vw;
        position: absolute;
        top: 17.6vw;
        left: 4.4vw; }
      section .swiper-container .swiper-wrapper .swiper-slide .bath .board1 {
        width: 55.33333vw;
        position: absolute;
        top: 45.06667vw;
        left: 0vw; }
      section .swiper-container .swiper-wrapper .swiper-slide .bath .board2 {
        width: 55.33333vw;
        position: absolute;
        top: 54.66667vw;
        right: 0vw; }
      section .swiper-container .swiper-wrapper .swiper-slide .bath .bathBottom {
        width: 100vw;
        position: absolute;
        top: 74.66667vw;
        left: 0vw;
        z-index: -1; }
      section .swiper-container .swiper-wrapper .swiper-slide .bath .bathSoap {
        width: 29.33333vw;
        position: absolute;
        top: 98.66667vw;
        left: 9.33333vw;
        transform: translate(0px, 0px); }
    section .swiper-container .swiper-wrapper .swiper-slide .car {
      width: 100%;
      height: 100%;
      position: relative;
      overflow: hidden; }
      section .swiper-container .swiper-wrapper .swiper-slide .car .carEarth {
        position: absolute;
        width: 86.93333vw;
        left: 7.86667vw;
        top: 0vw; }
      section .swiper-container .swiper-wrapper .swiper-slide .car .carModel {
        width: 97.33333vw;
        position: absolute;
        top: 43.73333vw;
        left: 1.33333vw; }
      section .swiper-container .swiper-wrapper .swiper-slide .car .rose {
        width: 21.33333vw;
        position: absolute;
        top: 41.6vw;
        right: 2.66667vw; }
      section .swiper-container .swiper-wrapper .swiper-slide .car .has {
        width: 64.66667vw;
        position: absolute;
        top: 13.33333vw;
        left: 9.33333vw; }
    section .swiper-container .swiper-wrapper .swiper-slide .old {
      width: 100%;
      height: 100%;
      position: relative;
      overflow: hidden; }
      section .swiper-container .swiper-wrapper .swiper-slide .old .oldEarth {
        width: 62.26667vw;
        position: absolute;
        right: 0vw;
        top: 0vw; }
      section .swiper-container .swiper-wrapper .swiper-slide .old .older {
        width: 78.26667vw;
        position: absolute;
        left: 7.6vw;
        top: 10.26667vw; }
      section .swiper-container .swiper-wrapper .swiper-slide .old .flower {
        width: 91.6vw;
        position: absolute;
        left: 4.66667vw;
        top: 53.33333vw;
        z-index: -1; }
    section .swiper-container .swiper-wrapper .swiper-slide .fashion {
      width: 100%;
      height: 100%;
      position: relative;
      overflow: hidden;
      background-image: url(../images/fashion-bc.png);
      background-size: cover; }
      section .swiper-container .swiper-wrapper .swiper-slide .fashion .fashionTitle {
        width: 66.26667vw;
        position: absolute;
        top: 3.2vw;
        left: 2.66667vw;
        z-index: 1; }
      section .swiper-container .swiper-wrapper .swiper-slide .fashion .fashionLeft {
        width: 96.66667vw;
        position: absolute;
        top: 43.2vw;
        left: 3.33333vw; }
      section .swiper-container .swiper-wrapper .swiper-slide .fashion .fashionRight {
        width: 60.13333vw;
        position: absolute;
        top: 18.66667vw;
        left: 40vw; }

section .musicPlay {
  position: absolute;
  width: 0;
  height: 0;
  top: 0px; }

section .timeOver {
  -webkit-animation: timeOut 1.5s forwards;
  animation: timeOut 1.5s forwards; }

section .end {
  width: 100vw;
  height: 100vh;
  display: block;
  overflow: hidden;
  background-size: 100vw 100vh;
  position: relative; }
  section .end .lbox {
    position: absolute;
    left: 50vw;
    top: 32.66667vw; }
    section .end .lbox div[class^="light"] {
      border-right: 90vh solid #edec92;
      border-left: 90vh solid #edec92; }
  section .end .title {
    position: relative; }
    section .end .title .title-left {
      width: 38.93333vw;
      height: 13.86667vw;
      position: absolute;
      top: 2.66667vw;
      left: 2.26667vw;
      background-image: url(../images/result-log.png);
      background-size: 38.93333vw 13.86667vw; }
      section .end .title .title-left .content {
        width: 100%;
        height: 99%;
        padding: 2.8vw;
        font-size: 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%; }
        section .end .title .title-left .content .content-left {
          width: 8.66667vw;
          height: 8.66667vw;
          border-radius: 4.4vw; }
        section .end .title .title-left .content .content-right {
          font-size: 3.46667vw;
          line-height: 3.46667vw;
          font-weight: bold;
          width: 24.4vw;
          text-align: center; }
    section .end .title .title-right {
      width: 34.66667vw;
      position: absolute;
      top: 2.26667vw;
      right: 2.66667vw; }
  section .end .grading {
    width: 20vw;
    margin: 0 auto;
    padding-top: 16vw; }
  section .end .good {
    width: 44.26667vw;
    height: 13.73333vw;
    background-image: url(../images/getNum.png);
    background-size: 44.26667vw 13.73333vw;
    display: flex;
    margin: 0 auto; }
    section .end .good .good-text {
      font-size: 6.93333vw;
      line-height: 6.93333vw;
      padding-top: 4.4vw;
      margin-left: 6.66667vw;
      font-weight: bold; }
      section .end .good .good-text span {
        font-size: 6.93333vw; }
  section .end .detail-box {
    padding-top: 2.66667vw; }
    section .end .detail-box .detail {
      width: 93.33333vw;
      height: 26.26667vw;
      margin: 0 auto;
      background-image: url(../images/resultDeatil.png);
      background-size: 93.33333vw 26.26667vw; }
      section .end .detail-box .detail .detail-text {
        text-indent: 1em;
        line-height: 7.73333vw;
        padding-top: 3.33333vw;
        font-size: 4vw;
        font-weight: bold;
        margin: 0 auto;
        text-align: center;
        width: 82vw;
        -moz-user-select: none;
        -webkit-user-select: none; }
  section .end .challenge {
    width: 91.46667vw;
    margin-left: 5.86667vw;
    margin-top: 3.2vw;
    position: relative;
    z-index: 3; }
    section .end .challenge .challenge-left {
      width: 40vw;
      height: 14.53333vw;
      background-image: url(../images/again.png);
      background-size: 40vw 14.53333vw; }
    section .end .challenge .challenge-right {
      width: 45.33333vw;
      height: 14.13333vw;
      background-image: url(../images/share.png);
      background-size: 45.33333vw 14.13333vw;
      z-index: 3; }
  section .end .friendRank {
    width: 100%;
    z-index: 2;
    position: absolute;
    bottom: 1.33333vw; }
    section .end .friendRank .friendRankBox {
      width: 80vw;
      height: 40vw;
      margin: 0 auto;
      background-image: url(../images/result-rank.png);
      background-size: 80vw 40vw; }

.timeTip {
  color: red;
  font-weight: bold;
  position: fixed;
  font-size: 3.33333vw;
  line-height: 13.33333vw;
  width: 26.66667vw;
  height: 13.33333vw;
  text-align: center;
  left: 35vw;
  bottom: 51.2vw;
  z-index: 5;
  border: 3px solid gray;
  background-color: gold;
  opacity: 0; }

/*问题选择框样式*/
.questionAnswer {
  position: relative;
  z-index: 4;
  display: none; }
  .questionAnswer ul {
    position: fixed;
    left: 5.33333vw;
    bottom: 1.73333vw; }
    .questionAnswer ul li {
      margin-bottom: 2.53333vw;
      width: 69.86667vw;
      height: 14.66667vw;
      background-size: 69.86667vw 14.66667vw; }
      .questionAnswer ul li:nth-of-type(1) {
        background-image: url(../images/questionA.png); }
      .questionAnswer ul li:nth-of-type(2) {
        margin-left: 1.06667vw;
        background-image: url(../images/questionB.png); }
      .questionAnswer ul li:nth-of-type(3) {
        background-image: url(../images/questionC.png); }
      .questionAnswer ul li .text {
        padding: 4vw 0vw;
        padding-left: 6.66667vw;
        font-size: 4.26667vw;
        text-align: center;
        font-weight: bold;
        -moz-user-select: none;
        -webkit-user-select: none; }
  .questionAnswer .next {
    position: fixed;
    bottom: 5.46667vw;
    left: 81.33333vw;
    width: 11.73333vw;
    height: 30.66667vw;
    background-image: url(../images/next.png);
    background-size: 11.73333vw 30.66667vw; }
  .questionAnswer .mouseTime {
    width: 18.53333vw;
    height: 16.53333vw;
    background-image: url(../images/timer.png);
    background-size: 18.53333vw 16.53333vw;
    position: fixed;
    left: 77.33333vw;
    bottom: 39.06667vw; }
    .questionAnswer .mouseTime .timeText {
      font-size: 4.26667vw;
      margin: 0 auto;
      text-align: center;
      line-height: 16.53333vw;
      -moz-user-select: none;
      -webkit-user-select: none; }

.circleBc {
  position: absolute;
  width: 100vw;
  height: 100vh; }
  .circleBc .circleBox {
    width: 100%;
    height: 100%;
    position: relative; }
    .circleBc .circleBox div[class^="item"] {
      border-radius: 50%;
      position: absolute;
      margin: auto;
      top: -9999px;
      left: -9999px;
      right: -9999px;
      bottom: -9999px;
      z-index: -1;
      border: 9.33333vw solid #4f4f4f;
      -webkit-animation: big .7s infinite;
      animation: big .7s infinite; }
    .circleBc .circleBox .item1Bc {
      width: 28.8vw;
      height: 28.8vw;
      top: 35.2vw;
      left: 53.6vw;
      background-color: #4f4f4f; }
    .circleBc .circleBox .item2Bc {
      width: 58.93333vw;
      height: 58.93333vw;
      top: 19.86667vw;
      left: 38.4vw; }
    .circleBc .circleBox .item3Bc {
      width: 92.53333vw;
      height: 92.53333vw;
      top: 2.8vw;
      left: 23.06667vw; }
    .circleBc .circleBox .item4Bc {
      width: 125.86667vw;
      height: 125.86667vw;
      top: -12.53333vw;
      left: 7.73333vw; }
    .circleBc .circleBox .item5Bc {
      width: 160vw;
      height: 160vw;
      top: -27.86667vw;
      left: -7.6vw; }
    .circleBc .circleBox .item6Bc {
      width: 193.33333vw;
      height: 193.33333vw;
      top: -43.2vw;
      left: -22.93333vw; }
    .circleBc .circleBox .item7Bc {
      width: 226.66667vw;
      height: 226.66667vw;
      top: -58.53333vw;
      left: -38.26667vw; }

.bath .circleBc {
  top: -29.33333vw;
  left: 18.66667vw; }

.car .circleBc {
  top: -17.6vw;
  left: 0vw; }

.old .circleBc {
  top: -30.66667vw;
  left: 0vw; }

div[class^="light"] {
  width: 0px;
  height: 0px;
  position: absolute;
  margin: auto;
  top: -9999px;
  left: -9999px;
  right: -9999px;
  bottom: -9999px;
  border-top: 60px solid transparent;
  border-bottom: 60px solid transparent;
  border-right: 90vh solid #555555;
  border-left: 90vh solid #555555;
  z-index: -1; }

.light1 {
  -webkit-animation: rotateLight1 3s infinite linear;
  animation: rotateLight1 3s infinite linear; }

.light2 {
  -webkit-animation: rotateLight2 3s infinite linear;
  animation: rotateLight2 3s infinite linear; }

.light3 {
  -webkit-animation: rotateLight3 3s infinite linear;
  animation: rotateLight3 3s infinite linear; }

.light4 {
  -webkit-animation: rotateLight4 3s infinite linear;
  animation: rotateLight4 3s infinite linear; }

.light5 {
  -webkit-animation: rotateLight5 3s infinite linear;
  animation: rotateLight5 3s infinite linear; }

.light6 {
  -webkit-animation: rotateLight6 3s infinite linear;
  animation: rotateLight6 3s infinite linear; }
